<template>
	<view class="calender">
		<view class="head1">
			<view class="head1-left" @click.stop="pre">
				上一个月
			</view>
			<picker mode="date" :value="date" fields="month" @change="bindDateChange">
				<text class="head1-text">{{ (nowDate.year||'') +'年'+( nowDate.month||'')+'月'}}</text>
			</picker>
			<view class="head1-right" @click.stop="next">
				下一个月
			</view>
		</view>
		<view class="container-table">
			<uni-table ref="table" :loading="loading" stripe emptyText="暂无更多数据">
				<uni-tr class="table-hd">
					<uni-th width="80" align="center">日期</uni-th>
					<uni-th width="60" align="center">借支</uni-th>
					<uni-th width="80" align="center">出勤</uni-th>
					<uni-th width="60" align="center">加班</uni-th>
					<uni-th width="60" align="center">夜补</uni-th>
					<uni-th width="60" align="center">请假</uni-th>
					<uni-th width="60" align="center">餐补</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">
						<!-- 出勤数(不含加班) -->
						<view class="t1-bd" v-if="item.type&&item.type==1">
							<view class="label1">
								出勤数
							</view>
							<view class="label2">
								(不含加班)
							</view>
						</view>
						<text v-else>{{ item.t1 }}</text>
					</uni-td>
					<uni-td align="center">{{ item.t2 }}</uni-td>
					<uni-td align="center">{{ item.t3 }}</uni-td>
					<uni-td align="center">{{ item.t4 }}</uni-td>
					<uni-td align="center">{{ item.t5 }}</uni-td>
					<uni-td align="center">{{ item.t6 }}</uni-td>
					<uni-td align="center">{{ item.t7 }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="btn">
			<view class="btn-left">
				月总收入：12234444.00元
			</view>
		</view>
	</view>
</template>

<script>
	import Calendar from './components/m-calendar/util.js';
	import {
		getDate
	} from "./utils/date.js"
	export default {
		data() {
			return {
				date: '',
				weeks: [],
				calendar: {},
				nowDate: '',
				tableData: [],
				loading: false
			};
		},
		onLoad() {
			this.date = getDate(new Date(), 0).fullDate;
			// 获取日历方法实例
			this.cale = new Calendar({
				date: this.date,
				selected: [],
				startDate: '',
				endDate: '',
				range: false,
			})
			this.init(this.date)
			this.tableData = [{
					t1: '1',
					t2: '300',
					t3: '234小时',
					t4: '234小时',
					t5: '20.00',
					t6: '24小时',
					t7: '40.00'
				},
				{
					t1: '2',
					t2: '300',
					t3: '234小时',
					t4: '234小时',
					t5: '20.00',
					t6: '24小时',
					t7: '40.00'
				},
				{
					t1: '3',
					t2: '300',
					t3: '234小时',
					t4: '234小时',
					t5: '20.00',
					t6: '24小时',
					t7: '40.00'
				},
				{
					t1: '汇总',
					t2: '300',
					t3: '234小时',
					t4: '234小时',
					t5: '20.00',
					t6: '24小时',
					t7: '40.00'
				},
				{
					t1: '出勤数(不含加班)',
					type: 1,
					t2: '300',
					t3: '234小时',
					t4: '234小时',
					t5: '20.00',
					t6: '24小时',
					t7: '40.00'
				},
				{
					t1: '平时加班',
					t2: '300',
					t3: '234小时',
					t4: '234小时',
					t5: '20.00',
					t6: '24小时',
					t7: '40.00'
				},
			]
		},
		watch: {
			nowDate() {
				this.date = this.nowDate.fullDate
			},
		},
		methods: {
			/**
			 * 初始化日期显示
			 * @param {Object} date
			 */
			init(date) {
				this.cale.setDate(date)
				this.weeks = this.cale.weeks
				this.nowDate = this.calendar = this.cale.getInfo(date)
			},
			// 上个月
			pre() {
				const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
				this.setDate(preDate)
			},
			// 下个月
			next() {
				const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
				this.setDate(nextDate)
			},
			bindDateChange(e) {
				const value = e.detail.value + '-1'
				console.log(this.cale.getDate(value), 23);
				this.init(value)
			},
			/**
			 * 设置日期
			 * @param {Object} date
			 */
			setDate(date) {
				this.cale.setDate(date)
				this.weeks = this.cale.weeks
				this.nowDate = this.cale.getInfo(date)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.calender {
		padding-bottom: 98rpx;
		.head1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 32rpx;
			margin-top: 21rpx;

			.head1-left {
				width: 159rpx;
				height: 64rpx;
				background: #FFAE13;
				border-radius: 0rpx 10rpx 10rpx 0rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 64rpx;
			}

			.head1-text {
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
			}

			.head1-right {
				width: 162rpx;
				height: 64rpx;
				background: #3A92FF;
				border-radius: 10rpx 0rpx 0rpx 10rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 64rpx;
			}
		}

		.container-table {
			/deep/ .uni-table-tr:first-child {
				background: #F5F5FC;
			}

			/deep/ .uni-table-th {
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
			}

			/deep/ .uni-table-td:first-child {
				background: #F5F5FC;
				font-weight: 500;
				font-size: 26rpx;
				color: #222222;
			}

			.t1-bd {

				.label1 {}

				.label2 {
					font-size: 20rpx;
					color: #666666;
				}
			}
		}

		.btn {
			display: flex;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 9;
			.btn-left{
				width: 100%;
				height: 98rpx;
				background: #DFEDFF;
				font-weight: bold;
				font-size: 28rpx;
				color: #3A92FF;
				line-height: 98rpx;
				text-align: center;
			}
		}
	}
</style>